@extends('layouts.back_stage')
@section('content') 
  <style>
  #app{padding:20px}
  .type_x{margin:40px 0 0 20px;}
  .ingred_sel{width:150px;margin:0 10px 0 10px}
  .input_add{width:300px;margin-left:10px;}
  .add_s{margin:20px 0 0 20px}
  .back{background:#fff;margin:10px 10px  30px 10px;padding:10px}
  .addsert{font-weight:500;margin:20px 0 0 30px}
  .caser{width:300px}
  .tab_show{margin:30px 0 20px 20px}
  .bank_account{width:350px}
  </style>
  <div class="container">
      <div class="page-body" id="app">
      <el-form  ref="ruleForm" v-model="ruleForm"   class="demo-ruleForm">
         <div class="header"><h3>客户基本信息</h3></div>
         <div class="back">
          <div class="type_x">
            <label> &nbsp;&nbsp;&nbsp;类型:</label>
            <select class="ingred_sel one"  v-model="ruleForm.type" name="supplier">
                <option value="">请选择</option>  
                <option value="1">代理商</option>                                      
                <option value="2">分公司</option>                                                                     
              </select>
            <label>所属机构:</label>
              <select class="ingred_sel two" v-model="ruleForm.pid" name="supplier">
                
                  <option value="">请选择</option>  
                  <option value="1">大品</option>                                      
                  <option value="2">中品</option>
                  <option value="3">小品</option>                                                               
              </select>
            <label>客户名称:</label>
                <el-input  class="ingred_sel" v-model="ruleForm.name" size="small" placeholder="请输入名称"></el-input>
            <label>手机号码:</label>
              <el-input  class="ingred_sel" v-model="ruleForm.tel" size="small" placeholder="请输入1开头的11位数"></el-input>
          </div>
          <div class="add_s">
            <label>省市区：</label>
            <el-cascader
                :options="options"
                class='caser'
                size="small"
                v-model="ruleForm.area"
                @focus="handleChange">
              </el-cascader>
            </div>
            <div class="addsert">
            <span>
            <label>地址:</label>
                <el-input  class="input_add on"  v-model="ruleForm.address" size="small" placeholder="请输入:详细地址"></el-input>
            </span>  
            </div>
        </div>
        <div class="header"><h3>其他信息</h3></div>
        <div class="back">
            <div class="type_x">
               
                  <label>银行账号:&nbsp;&nbsp;&nbsp;</label>
                  <el-input   class="bank_account" v-model="ruleForm.bank_account" size="small" placeholder="请输入: **银行621700202000****678"></el-input>
              </div>
              <div class="tab_show">
                    <label>合同时间:&nbsp;&nbsp;&nbsp;</label>
                    <el-date-picker
                     v-model="ruleForm.start"
                      type="datetime"
                      size="small"
                      value-format="yyyy-MM-dd hh:mm:ss"
                      placeholder="选择日期时间">
                    </el-date-picker>
               </div>
               <div class="tab_show">
                    <label>结束时间:&nbsp;&nbsp;&nbsp;</label>
                    <el-date-picker
                      v-model="ruleForm.end"
                      type="datetime"
                      size="small"
                      value-format="yyyy-MM-dd hh:mm:ss"
                      placeholder="选择日期时间"
                     >
                    </el-date-picker>
                    
               </div>
        </div>
        <el-form-item>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   <el-button type="primary" class="rest" @click="formSubmit" size="small">立即创建</el-button>
                   <el-button  size="small"  @click="resetForm" >重置</el-button>
        </el-form-item>
       </el-form>
      </div>
  </div>
 <script>
   new Vue({
        el: '#app',
        data() {     
         return {  
          options: [],
         // value6: '',
          ruleForm:{
            type:'',
            pid:'',
            name:'',
            tel:'',
            address:'',
            area:[],
            area_bh:[],//装省市区最后一个id
            bank_account:'',//银行账号
            start:'',//开始时间 
            end:''//结束时间 
          },
           options: [],
       
            };
          },
       methods: {
        handleChange(value) {
        //console.log(111,value);
        const that=this;
            $.ajax({
              type:'get',
              url:'/clients/address'
            }).then(function(response){
               let data=response
               const options = [];
               for (let item in data) {

                let province = {
                        value: data[item].value,
                        label: data[item].label,
                        children: []
                    };
                    for (let city in data[item].children) {
                      let counties=[];
                      for (let county in data[item].children[city].children) {
                            let cityno=data[item].children[city].children[county];
                            counties.push({value:cityno.value,label:cityno.label});
                        }
                        province.children.push({
                            value: data[item].children[city].value,
                            label: data[item].children[city].label,
                            children:counties
                        });
                    }
                        options.push(province)
                  }
                  that.$data.options=options;
               })
             },
             //重置重置
             resetForm(){
               // console.log(222,this.ruleForm)
                this.ruleForm='',
                this.$notify({
                title: '成功',
                message: '重置清空成功',
                type: 'success'
              });

             },
             formSubmit(){
                 let that=this
                 for(var e in this.ruleForm.area){   
                 }
                  this.ruleForm.area_bh=this.ruleForm.area[e]
                
               if(this.ruleForm.type==''){
                          this.$notify.error({
                              title: '提示',
                              message: "请选择类型",
                          });
                          return false;
                      } 
              if(this.ruleForm.pid==''){
                    this.$notify.error({
                        title: '提示',
                        message: "请选择所属机构",
                    });
                    return false;
                } 
                if(this.ruleForm.name==''){
                    this.$notify.error({
                        title: '提示',
                        message: "请输入名称",
                    });
                    return false;
                }  
                if(this.ruleForm.tel==''){
                    this.$notify.error({
                        title: '提示',
                        message: "请输入手机号码",
                    });
                    return false;
                } 
                var moder=/^1\d{10}$/ 
                if(!moder.test(this.ruleForm.tel)){
                  this.$message({
                      message: '手机号码格式有问题 请输入以1开头的11位数',
                      type: 'warning'
                    });
                    return false;
                }

                if(this.ruleForm.area==''){
                    this.$notify.error({
                        title: '提示',
                        message: "请选择省市区",
                    });
                    return false;
                }  
                if(this.ruleForm.address==''){
                    this.$notify.error({
                        title: '提示',
                        message: "请输入详细地址",
                    });
                    return false;
                }  
               
                   $.ajax({
                    type:"post",
                    url:"/supplier/store",
                      data:this.ruleForm,
                    success: function (res) {
                     // console.log(res)
                     that.$notify.success({
                                title: '提示',
                                message: '新增提交成功',
                            });
                     window.location.href = "/supplier/showpage";
                         
                    } 
                  });  
                

                  
             },
        },
        mounted() {

        },
   });   
 
 </script>

@endsection